<template>
  <div class="fast-table-container">
    <el-table
      ref="table"
      :max-height="options.maxHeight"
      :show-header="options.showHeader"
      :height="options.height"
      :data="data"
      :highlight-current-row="options.highlightCurrentRow"
      :row-key="options.rowKey"
      @row-click="handleRowClick"
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
    >
      <emptydata slot="empty" v-if="!data || data.length == 0" />

      <!--索引列-->
      <el-table-column v-if="options.index" type="index" width="50" />

      <el-table-column
        v-if="options.selection"
        type="selection"
        :reserve-selection="options.reserveSelection"
        width="55"
      />

      <template v-for="(col, index) in options.columns">
        <!-- 操作列/自定义列 -->
        <!--<slot v-if="col.slot" :name="col.slot" :key="index"/>-->

        <!--操作列-->
        <!-- v-if="col.operate && col.showcolumn" -->
        <el-table-column
          v-if="col.operate && col.showcolumn"
          :key="index"
          fixed="right"
          width="108"
          :label="$t('m.Users_Details_Operation')"
        >
          <template #default="scope">
            <!--col.display参数为dropdown将以下拉方式展示，默认为tile平铺展示-->
            <template v-if="col.display == 'dropdown'">
              <el-dropdown placement="bottom">
                <img
                  src="@/assets/imgs/ic_operation.svg"
                  alt=""
                  style="cursor: pointer;"
                />
                <el-dropdown-menu
                  slot="dropdown"
                  style="white-space: nowrap !important;"
                >
                  <template v-for="(item, index) in col.actions">
                    <el-dropdown-item
                      :key="index"
                      v-if="
                        typeof item.permission === 'function'
                          ? item.permission(scope.row)
                          : false
                      "
                      :disabled="
                        typeof item.disabled === 'function'
                          ? item.disabled(scope.row)
                          : item.disabled
                      "
                      @click.native="item.click(scope.row)"
                    >
                      {{
                        typeof item.label === 'function'
                          ? item.label(scope.row)
                          : item.label
                      }}
                    </el-dropdown-item>
                  </template>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
            <template v-else>
              <template v-for="(item, index) in col.actions">
                <span
                  class="btn"
                  :key="index"
                  v-if="item.permission"
                  :class="{
                    disabled:
                      typeof item.disabled === 'function'
                        ? item.disabled(scope.row)
                        : item.disabled
                  }"
                  @click="item.click(scope.row)"
                >
                  {{
                    typeof item.label === 'function'
                      ? item.label(scope.row)
                      : item.label
                  }}
                </span>
              </template>
            </template>
          </template>
        </el-table-column>

        <!-- 普通列 -->
        <el-table-column
          v-if="!col.operate && !col.showcolumn"
          :key="index"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          :min-width="col.minWidth ? col.minWidth : '150px;'"
          :fixed="col.fixed"
          :sortable:="col.sortable"
          :show-overflow-tooltip="col.showOverflowTooltip"
          :render-header="col.renderHeader"
          :formatter="col.formatter"
        >
          <!--switch组件-->
          <template #default="scope" v-if="col.switch">
            <el-switch
              :value="scope.row[col.prop]"
              :active-value="col.activeValue"
              :inactive-value="col.inactiveValue"
              @click.native="
                col.switchChange ? col.switchChange(scope.row) : ''
              "
            >
            </el-switch>
          </template>
          <template #default="scope" v-else-if="col.showPhone">
            <span v-show="scope.row.phone">(+{{ scope.row.code }})</span>
            <span v-if="!scope.row.showPhone">
              {{ scope.row.phone | maskedPhone | strFormat }}
            </span>
            <span v-else>
              {{ scope.row.phone | strFormat }}
            </span>
            <i
              v-if="scope.row.phone"
              :class="{
                'el-icon-view': scope.row.showPhone == true,
                'el-icon-view diagonal_line': scope.row.showPhone == false
              }"
              style="position: relative;width: 14px !important;height: 14px !important;cursor: pointer;"
              @click="scope.row.showPhone = !scope.row.showPhone"
            ></i>
          </template>
          <template #default="scope" v-else-if="col.showEmail">
            <span v-if="!scope.row.showEmail">
              {{ scope.row.email | maskedEmail | strFormat }}
            </span>
            <span v-else>
              {{ scope.row.email | strFormat }}
            </span>
            <i
              v-if="scope.row.email"
              :class="{
                'el-icon-view': scope.row.showEmail == true,
                'el-icon-view diagonal_line': scope.row.showEmail == false
              }"
              style="position: relative;width: 14px !important;height: 14px !important;cursor: pointer;"
              @click="scope.row.showEmail = !scope.row.showEmail"
            ></i>
          </template>
          <template #default="scope" v-else-if="col.showImg">
            <el-image
              v-if="scope.row.icon"
              fit="cover"
              :src="fileUrlFormat(scope.row.icon)"
              :preview-src-list="[fileUrlFormat(scope.row.icon)]"
              style="width:32px;height:32px;border-radius: 50%;"
            ></el-image>
            <span v-else>--</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'fast-table',
  props: {
    /**
     * 配置项
     * @param showHeader            是否显示表头
     * @param height                表格高度
     * @param index                 是否需要索引列
     * @param selection             是否需要多选列
     * @param highlight-current-row 是否需要点击高亮显示
     * @param columns               表格数据列
     * @param @rowKey               rowKey事件
     * @param @currentChange       当前选中行变化事件  (currentRow, oldCurrentRow) => {}
     * @param @selectionChange      多选选中变化事件   (rows) => {}
     *
     */
    options: {
      type: Object,
      required: true
    },
    // 数据
    data: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {}
  },
  computed: {},
  methods: {
    // 处理当前选中行变化事件
    handleCurrentChange (currentRow, oldCurrentRow) {
      // console.log('handleCurrentChange', currentRow, oldCurrentRow)
      this.$emit('currentChange', currentRow)
      if (this.options.currentChange) {
        this.options.currentChange(currentRow, oldCurrentRow)
      }
    },
    // 处理多选变化事件
    handleSelectionChange (rows) {
      // console.log('handleSelectionChange', rows)
      this.$emit('selectionChange', rows)
      if (this.options.selectionChange) {
        this.options.selectionChange(rows)
      }
    },
    // 处理行点击事件
    handleRowClick (row) {
      if (this.options.rowClick) {
        this.options.rowClick(row)
      }
    },
    // 选中当前行方法
    setCurrentRow (row) {
      this.$refs.table.setCurrentRow(row)
    }
  }
}
</script>
<style scoped lang="scss">
.fast-table-container {
  // 列表按钮样式
  .btn {
    color: $color;

    &:hover {
      cursor: pointer;
      text-decoration: underline $color;
    }
  }

  ::v-deep .el-table .cell {
    line-height: 16px !important;
  }

  ::v-deep .el-table th,
  .el-table tr {
    height: 40px !important;
  }

  ::v-deep .el-table th.is-leaf {
    border-right: none;
  }

  ::v-deep .el-table .el-table__body {
    border-right: 1px solid #ebeef5;
  }

  ::v-deep .el-table__row > td {
    border-right: none;
    height: 64px !important;
  }

  ::v-deep .el-table .el-table__cell {
    text-align: center !important;
  }
}
.diagonal_line::after {
  content: '';
  position: absolute;
  top: 1px; /* 定位到图标的中心 */
  left: 10px;
  width: 100%; /* 横跨整个图标 */
  height: 1px; /* 斜线的厚度 */
  background: #646b80; /* 斜线的颜色 */
  transform: translateY(-50%); /* 对于定位的微调 */
  transform-origin: 0 0; /* 斜线的起点定位 */
  transform: rotate(120deg) translateY(-50%); /* 旋转斜线90度 */
}
</style>
